<template>
  <el-row :gutter="20" class="top-view">
  <el-col :span="6"><div class="grid-content bg-purple"><TodaySales/> </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"><TodayOrders/></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"><TodayUsers/></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"><TotalUsers/></div></el-col>
</el-row>
</template>

<script>
import TodayOrders from '@/views/dashboard/components/TodayOrders'
import TodaySales from '@/views/dashboard/components/TodaySales'
import TodayUsers from '@/views/dashboard/components/TodayUsers'
import TotalUsers from '@/views/dashboard/components/TotalUsers'
export default {
  name: 'TopView',
  components:{TodayOrders,TodaySales,TodayUsers,TotalUsers}
}
</script>

<style lang="scss">
 

 .top-view{
  // 关于数字的样式
  .number{
    font-weight: 700;
    margin: 0 5px;
  }
  // 上箭头的样式
  .increment{
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent green transparent;
  }
  // 下箭头的样式
  .decrement{
     border-width: 5px;
    border-style: solid;
    border-color: red transparent transparent transparent;

  }

}
</style>
